<template>
  <div class="footer_box">
    <!-- 播放器 -->
    <audio
      ref="audio"
      class="footer_audio"
      :src="songMessage[0] ? songMessage[0].url : ''"
      @ended="songEnded"
      @timeupdate="changeCurrentTime"
      @durationchange="updateDuration"
    ></audio>

    <div class="play_controls">
      <!-- 上一首歌 -->
      <svg class="icon" aria-hidden="true" @click="nextOrLast(-1)">
        <use xlink:href="#icon-shangyishou1"></use>
      </svg>

      <!-- 是否播放 -->
      <svg
        class="icon playButton"
        aria-hidden="true"
        v-if="showPlay"
        @click="playMusic"
      >
        <use xlink:href="#icon-bofang1"></use>
      </svg>
      <svg class="icon playButton" aria-hidden="true" v-else @click="playMusic">
        <use xlink:href="#icon-zanting1"></use>
      </svg>

      <!-- 下一首歌 -->
      <svg class="icon" aria-hidden="true" @click="nextOrLast(1)">
        <use xlink:href="#icon-xiayishou1"></use>
      </svg>
    </div>

    <!-- 进度条 -->
    <div class="input_range_box">
      <span class="span_input_left">{{currentTimeStr}}</span>
      <input type="range" v-model="currentTime" :max="durations" @change="changeRangeValue" />
      <span>{{changeTimeStr()}}</span>
    </div>

    <!-- 其他操作 -->
    <div class="footer_controls">

    </div>

  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      showPlay: true,
      index: 0,
      currentTime: 0,
      singleSong: [],
      durations: 0,
      currentTimeStr:'0:00',
    };
  },
  computed: {
    ...mapState(["songMessage"]),
    ...mapGetters(["songs"]),
  },
  watch: {
    // 监视index，换音乐的时候重新这首歌的详细请求
    async index(newValue) {
      let newID;
      this.songs.forEach((item) => {
        if (newValue === item.index) {
          newID = item.id;
          return;
        }
      });
      // 获取音乐url
      // 这里使用异步函数是为了 让audio有数据，在vuex请求过程中需要时间
      await this.$store.dispatch("getSongsFromId", newID);
      await this.$store.dispatch("getSongsDetailFromId",newID)
      await this.$store.dispatch('getSongLyricsFromId',newID)
      this.playMusic();
    },
    currentTime(newValue,b){
      let num = ((newValue/1000)/60).toFixed(2)
      let arr = num.split('.')
      let str = arr[0]+':'+arr[1]
      this.currentTimeStr = str
    }
  },
  methods: {
    // 是否播放音乐
    playMusic() {
      // 判断是否有缓存歌曲的url，如果没有就不能播放
      if (this.songMessage[0]) {
        if (this.$refs.audio.paused === true) {
          this.$refs.audio.play();
          this.showPlay = false;
          this.$bus.$emit('changeMoveClass',1)
        } else {
          this.$refs.audio.pause();
          this.showPlay = true;
          this.$bus.$emit('changeMoveClass',0)
        }
      }
    },
    // 切换音乐
    nextOrLast(num) {
      if (this.index > 1 && this.index < 20) return (this.index += num);
      if (this.index === 1 && num === -1) return (this.index = 20);
      if (this.index === 1 && num === 1) return (this.index += num);
      if (this.index === 20 && num === 1) return (this.index = 1);
      if (this.index === 20 && num === -1) return (this.index += num);
    },
    // 音乐播放结束时候触发这个事件，查看audio标签了解到这个事件
    songEnded() {
      this.nextOrLast(1);
    },
    // 当音乐播放时currentTime改变就触发这个函数，看audio文档了解到
    changeCurrentTime() {
      this.currentTime = parseInt(this.$refs.audio.currentTime * 1000);
      // console.log(this.currentTime)
    },
    // 当音乐获取到并得到总时长的时候触发这个函数，看audio文档
    updateDuration() {
      // console.log(this.$refs.audio.duration);
      this.durations = this.$refs.audio.duration * 1000;
    },
    
    // 处理durations的数据并返回
    changeTimeStr(){
      let num = ((this.durations/1000)/60).toFixed(2)
      let arr = num.split('.')
      let str = arr[0]+':'+arr[1]
      return str
    },
    // 当滑动 进度条 的时候执行，改变currentTime的值
    changeRangeValue(event){
      this.$refs.audio.currentTime = event.target._value/1000
    }
  },
  mounted() {
    // 拿到歌曲列表中每一行的数据
    this.$bus.$on("getSongId", (row) => {
      this.index = row.index;
      // 把index传给asideBottom组件
    this.$bus.$emit('submitIndex',this.index)
    });
    // SongsDetail请求了，'播放全部'
    this.$bus.$on('playAllSongs',(index)=>{
      this.index = index
    })
    
  },
};
</script>

<style scoped lang="less">
.footer_box {
  height: 100%;
  display: flex;
  // justify-content: space-around;
  // 播放、切歌
  .play_controls {
    width: 300px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      width: 40px;
      height: 40px;
      fill: #c62f2f;
      overflow: hidden;
      cursor: pointer;
    }
    .playButton {
      width: 50px;
      height: 50px;
    }
  }
  // 进度条
  .input_range_box{
    display: flex;
    align-items: center;
    width: 54%;
    span{
      width: 15%;
    }
    .span_input_left{
      display: block;
      display: flex;
      justify-content: end;
    }
    input{
      width: 70%;
      cursor: pointer;
    }
  }
  // 其他操作
  .footer_controls{
    width: 30%;
    background-color: orange;
  }
}
</style>